<template>
	<view class="uni-common-pb uni-padding-wrap uni-common-mt">
		<form @submit="formSubmit">
			<view class="uni-form-item uni-row">
				<view class="title">设备号</view>
				<input class="uni-input" name="mobile"  v-model="mobile" placeholder="请输设备号" />
			</view>
			<button type="primary" formType="submit">查询</button>
		</form>

		<view v-for="(item,index) in devicelist" :key="index" @tap="openinfo" :data-stepid="index">
			<view class="uni-card">
				<view class="uni-card-header">
					手机号:&nbsp;{{item.name}}
					<view class="zaixian" v-if="item.isonline === 1">
						在线
					</view>
					<view class="nozaixian" v-if="item.isonline === 0">
						离线
					</view>
				</view>
				<view class="uni-card-content">
					<view class="uni-card-content-inner">
						<view class="uni-flex uni-row">
							经纬度: &nbsp;{{item.lat}},&nbsp;{{item.lng}}
						</view>
					</view>
				</view>
				<view class="uni-card-footer">最后更新时间:&nbsp;{{item.update_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				mobile: '',
				devicelist: [],
			};
		},
		onLoad(e) {
			uni.getStorage({
				key: 'username',
				success: (res) => {
					this.username = res.data;
				},
				fail: () => {

				}
			});
			uni.getStorage({
				key: 'password',
				success: (res) => {
					this.password = res.data;
				},
				fail: () => {
					this.password = "";
				}
			});
		},
		onNavigationBarButtonTap(e) {

		},
		methods: {
			openinfo: function(e) {
				var index = e.currentTarget.dataset.stepid;
				let _this = this;
				uni.request({
					url: this.url + '/api/feige/adddevice?',
					data: {
						"username": this.username,
						"password": this.password,
						"mobile": this.devicelist[index].name,
					},
					success: function(res) {
						uni.showToast({
							title: '添加成功！',
							icon: 'none',
							mask: true,
							duration: 3000
						});
						uni.navigateBack();
						return;
					},
					fail: (err) => {
						uni.showToast({
							title: err,
							icon: 'none',
							mask: true,
							duration: 3000
						});
					},
				});
			},
			formSubmit: function(e) {
				let _this = this;
				uni.request({
					url: this.url + '/api/feige/searchdevice?',
					data: {
						"name": this.mobile
					},
					success: function(res) {
						_this.devicelist = res.data.data;
					}
				});

			},
		}
	}
</script>

<style>
	button {
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.zaixian {
		color: #00FF69;
		font-size: 36upx;
	}

	.nozaixian {
		color: #FF3333;
		font-size: 36upx;
	}
</style>
